<template>
	<view>
		<view class="container" style="overflow: hidden;">
			<view class="login-bg" style="width: 100%;height: 100vh;position: absolute;z-index: 1;background: #73cec0;">
				<image src="https://mp-dc95b988-31eb-4147-82e1-c097f0893940.cdn.bspapp.com/登录模板库/login13/login13_bg.png" style="width: 100%;height: 300px;"></image>
			</view>
			<view style="position: relative;z-index: 2;color: #fff!important;padding-top: 35vh;opacity: 0;" :animation="domAnimation">
				<view class="margin-top-sm text-xl text-white text-center" style="color: #fbd4b5;">欢迎登陆</view>
				<view class="login-box">
					<view class="flex solid-bottom margin-top padding-tb align-center">
						<image class="phone margin-lr-sm" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/login-phone.png"></image>
						<input 
							class="flex-sub" type="text" placeholder="请输入账号" placeholder-class="public-placeholder" v-model="username"
							
						/><!-- type="number" maxlength="11" -->
					</view>
					<view class="flex solid-bottom margin-top-xl padding-tb align-center">
						<image class="pwd margin-lr-sm" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/login-pwd.png"></image>
						<input class="flex-sub" password placeholder="请输入密码" placeholder-class="public-placeholder" v-model="password"/>
					</view>
				</view>
				<view class="uni-list">
					<u-checkbox-group
						:size="50"
						@change="checkboxChange"
						:activeColor="checkboxItems.checked ? '#71b4a9' : '#FFFFFF'">
						<u-checkbox v-model="checkboxItems.checked" :name="checkboxItems.value">
							<text class="text-white">{{checkboxItems.value}}</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<!-- <u-checkbox-group class="uni-list" size="40">
					<u-checkbox 
						@change="checkboxChange" 
						v-model="checkboxItems.checked" 
						:name="checkboxItems.name"
						shape="square"
					>
						<text class="text-white">{{checkboxItems.value}}</text>
					</u-checkbox>
				</u-checkbox-group> -->
				
				<!-- <router-link to="admin" navType="replace"> -->
				
				<!-- <view class="cu-btn round lg flex margin bg-red" @click="login"> 
					<text>立即登录</text>
				</view> -->
				<view class="cu-btn round lg flex margin" style="background: #71b4a9;" @click="login">
					<text v-if="isLoading" class="cuIcon-icloading cuIconfont-spin margin-right-xs text-lg login-loading"></text>
					<text>{{isLoading ? '正在登录中，请稍后...' : '立即登录'}}</text>
				</view>
				<!-- </router-link> -->
				<view class="cu-tabbar-height"></view>
			</view>
			<!-- <view class="support cu-bar foot text-red justify-center" :style="isIPhoneX ? 'min-height: 75upx' : ''">
				<text>技术支持：赣州零点软件</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIPhoneX: false,
				username: '',
				password: '',
				checkboxItems: {
					name: 'rememberPwd',
					value: '记住密码',
					checked: false
				},
				domAnimation: {},
				isLoading: false
			}
		},
		methods: {
			refreshPage() {
				setTimeout(() => {
					//页面加载完成，获取本地存储的用户名及密码
					const userName = uni.getStorageSync('username');
					const userPsw = uni.getStorageSync('password');
					if (userName){
						this.username = userName;
						this.checkboxItems.checked = true;
						if (userPsw) {
							this.password = userPsw;
						} else {
							this.password = "";
						}
					} else {
						this.username = "";
						this.password = "";
						this.checkboxItems.checked = false;
					}
					let animation = uni.createAnimation({
						duration: 1500,
						timingFunction: 'ease',
					}) 
					animation.opacity(1).step()
					this.domAnimation = animation.export()
				}, 300)
			},
			isIPhoneXRegex() {
				let model = uni.getSystemInfoSync().model
				return (/iphone\sx/i.test(model))
					|| (/iphone/i.test(model) && /unknown/.test(model))
					|| (/iphone11/i.test(model))
					|| (/iPhone11/i.test(model))
					|| (/iphone\s11/i.test(model))
					|| (/iPhone\s11/i.test(model))
					|| (/iphonex/i.test(model))
					|| (/iphoneX/i.test(model))
					|| (/iphone\sX/i.test(model))
					|| (/iPhoneX/i.test(model))
					|| (/iPhone\sX/i.test(model))
			},
			checkboxChange(e) {
				if (e.length == 0) {
					this.checkboxItems.checked = false
				} else {
					this.checkboxItems.checked = true
				}
				
				// this.checkboxItems.checked = e.value
			},
			login() {
				if (this.username == '') {
					uni.showToast({
						title: '请输入手机号码！',
						icon: 'none'
					})
					return
				}
				// if (!/^1[3456789]\d{9}$/.test(this.username)) {
				// 	uni.showToast({
				// 		title: '手机号码格式不正确！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码！',
						icon: 'none'
					})
					return
				}
				if (this.isLoading) return
				this.isLoading = true
				setTimeout(() => {
					this.$api.login({
						username: this.username,
						password: this.password,
					}).then((t) => {
						this.isLoading = false
						//登录成功将用户名密码存储到用户本地
						if (this.checkboxItems.checked) { 
							//用户勾选“记住密码”
							uni.setStorageSync('username', this.username);
							uni.setStorageSync('password',  this.password);
						} else{ 
							//用户没有勾选“记住密码”
							uni.removeStorageSync('username');
							uni.removeStorageSync('password');
							this.username = "";
							this.password = "";
						}
						this.$store.commit('setToken', t.data);
						this.$api.getUserInfo().then((u) => {
							this.$store.commit('setUserInfo', u.data);
							this.$Router.pushTab({ name: 'index' });
						})
						
						// if (['1', '3', '4'].includes(res.data.user.roleId)) {
							// this.$Router.pushTab({ name: 'index' })
						// } else {
						// 	this.$Router.pushTab({ name: 'equipment' })
						// }
						// this.$Router.replace('people')
						
						// this.$Router.replace('leadership')
						
					}, () => { // 用户名或密码错误
						this.isLoading = false
					})
				}, 666)
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.isIPhoneX = this.isIPhoneXRegex()
			if (uni.getStorageSync('userInfo')) {
				this.$store.commit('getUserInfo')
				setTimeout(() => {
					// if (['1', '3', '4'].includes(uni.getStorageSync('userInfo').user.roleId)) {
						this.$Router.pushTab({ name: 'index' })
					// } else {
					// 	this.$Router.pushTab({ name: 'equipment' })
					// }
				}, 500);
			} else {
				this.refreshPage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.login-bg{
			// height: 425upx;
			image{
				width: 100%;
				height: 100vh;
			}
		}
		.login-box{
			padding: 25upx 35upx 0 35upx;
			input{
				height: 42upx;
				font-size: 26upx;
				color: #333;
			}
			.phone{
				width: 30upx;
				height: 42upx;
			}
			.pwd{
				width: 30upx;
				height: 36upx;
			}
		}
		.solid-bottom{
			background-color: white;
			border-radius: 10upx;
			&::after{
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
		}
		.support{
			box-shadow: none;
			bottom: 0;
			color: #fbd4b5;
			font-size: 18upx;
			min-height: 45upx;
		}
		// @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {  // 苹果底部安全区域
		// 	.support {
		//     	min-height: calc(10upx + constant(safe-area-inset-bottom));
		//         min-height: calc(10upx + env(safe-area-inset-bottom));  
		//     }
		// }
	}
	.uni-list {
		position: relative;
		width: 100%;
		padding: 40upx 0 25upx 40upx;
		display: flex;
		flex-direction: column;
	}
	// checkbox .uni-checkbox-input::before{
	// 	display: block;
	// }
	// checkbox::before{
	// 	content: ''
	// }
</style>
